/**
 * @file: 房屋分布图
 * @author: Lengxx
 * @date: 2024-07-16
 */
<template>
  <div class="pt-2 flex-grow">
    <div class="min-h-[400px] h-full" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
  import { get } from 'lodash-es';
  import { ref, onMounted } from 'vue';

  import { TreemapChart, EffectScatterChart, CustomChart  } from 'echarts/charts';

  import { useRequest } from '@vben/hooks';
  import { useECharts } from '@/hooks/web/useECharts';
  import { RoomStatusArr, RoomStatusDescArr } from './settings';

  const chartRef = ref();

  const { data: roomData, refreshAsync } = useRequest(getRoomData, { manual: true });
  const { setOptions, echarts, getInstance } = useECharts(chartRef, 'dark');

  echarts.use([EffectScatterChart, TreemapChart, CustomChart]);

  onMounted(async () => {
    await refreshAsync();
    setChartOpts();
  });

  async function getRoomData() {
    return getMapData([
      { value: 34.2, name: '春', status: 0, income: 1234, price: 58 },
      { value: 65.2, name: '夏', status: 2, income: 1234, price: 58 },
      { value: 54.2, name: '秋', status: 0, income: 1234, price: 58 },
      { value: 44.2, name: '冬', status: 1, income: 1234, price: 58 },
      { value: 38.2, name: '梅', status: 0, income: 1234, price: 58 },
      { value: 18, name: '兰', status: 0, income: 1234, price: 58 },
      { value: 25, name: '竹', status: 1, income: 1234, price: 58 },
      { value: 18, name: '菊', status: 0, income: 1234, price: 58 },
    ]);
  }

  function getCircleData() {
    return roomData.value.filter(item => item.status == 1)
  }

  function getMapData(input: any[]) {
    return input.map((item) => {
      const roomColor = RoomStatusArr[item.status];
      const itemStyle = {
        borderColor: roomColor,
        color: new echarts.graphic.RadialGradient(
          0.5,
          0.5,
          1,
          [
            {
              offset: 0.1,
              color: '#0C1622',
            },
            {
              offset: 1,
              color: roomColor,
            },
          ],
          false,
        ),
      };

      return {
        ...item,
        itemStyle,
        emphasis: {
          itemStyle: {
            borderWidth: 0,
            borderColor: 'rgba(14, 165, 233, 0)'
          }
        },
      };
    });
  }

  function setChartOpts() {
    setOptions({
      title: {
        text: '房屋分布图',
        left: 'center',
        top: '4%',
        textStyle: {
          color: '#fff',
        },
      },
      backgroundColor: '#181c41',
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(14, 165, 233, 0.5)',
        textStyle: {
          color: '#fff',
        },
        shadowColor: 'rgba(14, 165, 233, 0.5)',
        borderColor: 'rgba(14, 165, 233, 1)',
        formatter: (params) => {
          const { name, status, value, income } = params.data;
          return `
          <div>
            <div><label class="font-700">${name}</label> - ${value} m²  </div>
            <div class="text-orange-300 font-700">${RoomStatusDescArr[status]}</div>
            <div class="font-700 text-red">${income} 元</div>
          </div>
          `
        },
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          type: 'treemap',
          name: 'room',
          label: {
            show: true,
            position: [5, 5],
            align: 'left',
            fontSize: 12,
            formatter: (params) => {
              const name = get(params, 'data.name', '--');
              const value = get(params, 'data.value', '0');
              const { income, status } = params.data as any;
              const statusDesc = RoomStatusDescArr[status];
              const contentArr = [`${name}`, `${statusDesc}`,`${income}元`, `${value} m²`];
              return contentArr.join('\n\n');
            },
          },
          emphasis: {
            itemStyle: {
              color: 'rgba(29, 78, 216, 0.8)'
            }
          },
          itemStyle: {
            borderColor: 'rgba(14, 165, 233, 1)',
            borderWidth: 1,
            shadowColor: '#04aad5',
            shadowBlur: 8,
            // gapWidth: 2
          },
          data: roomData.value || []
        },
        // {
        //   type: 'custom',
        //   name: 'star',
        //   data: getCircleData() || [],
        //   renderItem: (params, api) => {
            
        //     const coord = api.coord([
        //       api.value(0, params.dataIndex),
        //       api.value(1, params.dataIndex)
        //     ]);
        //     const circles: any[] = [];
        //     for (let i=0; i<5; i++) {
        //       circles.push({
        //           type: 'circle',
        //           shape: {
        //             cx: 0,
        //             cy: 0,
        //             r: 30
        //           },
        //           style: {
        //             stroke: 'red',
        //             fill: 'red',
        //             lineWidth: 2
        //           },
        //           keyframeAnimation: {
        //             duration: 4000,
        //             loop: true,
        //             delay: (-i/4) * 4000,
        //             keyframes: [
        //               {
        //                 percent: 0,
        //                 scaleX: 0,
        //                 scaleY: 0,
        //                 style: {
        //                   opacity: 1
        //                 }
        //               },
        //               {
        //                 percent: 1,
        //                 scaleX: 1,
        //                 scaleY: 1,
        //                 style: {
        //                   opacity: 0
        //                 }
        //               }
        //             ]
        //           }
        //         })
        //     }
        //     return {
        //       type: 'group',
        //       x: coord[0],
        //       y: coord[1],
        //       children: circles
        //     }
        //   }
        // }
      ],
    });
  }
</script>

<style lang="less" scoped>
</style>
